<template>
  <div class="code-box">
    <div class="code-left">
      <el-form :model="form" ref="formRef" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="" prop="">
          <el-button @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="code-right">
      <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData"
        :externalLink="externalLink"></mavon-editor>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CodeForm',
  data() {
    return {
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return "/mavon-editor/markdown/github-markdown.min.css";
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return "/mavon-editor/highlightjs/highlight.min.js";
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return "/mavon-editor/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return "/mavon-editor/katex/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return "/mavon-editor/katex/katex.min.js";
        },
      },
      form: {
        userName: '',
        password: '',
      },
    }
  },
  props: {
    codeData: {
      type: String,
    },
  },
  mounted() { },
  created() { },
  methods: {
    submit() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return
        console.log(this.form)
      })
    },
  },
}
</script>

<style lang='scss' scoped></style>